<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">
    <title>维权力</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        
        body {
            font-family: -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Helvetica, Segoe UI, Arial, Roboto, 'PingFang SC', 'miui', 'Hiragino Sans GB', 'Microsoft Yahei', sans-serif;
            background: #f7f8fa;
            color: #323233;
            overflow-x: hidden;
        }
        
        /* 顶部状态栏 */
        .status-bar {
            height: 44px;
            background: #1989fa;
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 0 16px;
            color: white;
            font-size: 14px;
        }
        
        /* 顶部导航 */
        .top-nav {
            background: white;
            padding: 12px 16px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            box-shadow: 0 2px 8px rgba(0,0,0,0.06);
        }
        
        .logo-section {
            display: flex;
            align-items: center;
        }
        
        .logo {
            font-size: 24px;
            margin-right: 8px;
        }
        
        .app-name {
            font-size: 18px;
            font-weight: 600;
            color: #1989fa;
        }
        
        .login-btn {
            background: #1989fa;
            color: white;
            border: none;
            padding: 6px 16px;
            border-radius: 16px;
            font-size: 14px;
            cursor: pointer;
        }
        
        /* 搜索栏 */
        .search-section {
            background: white;
            padding: 12px 16px;
            margin-bottom: 8px;
        }
        
        .search-bar {
            background: #f7f8fa;
            border-radius: 20px;
            padding: 8px 16px;
            display: flex;
            align-items: center;
            color: #969799;
            font-size: 14px;
        }
        
        .search-icon {
            margin-right: 8px;
        }
        
        /* 快捷入口 */
        .quick-actions {
            background: white;
            margin: 0 16px 12px;
            border-radius: 12px;
            padding: 20px;
        }
        
        .action-grid {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 20px;
        }
        
        .action-item {
            display: flex;
            flex-direction: column;
            align-items: center;
            cursor: pointer;
            transition: transform 0.2s;
        }
        
        .action-item:active {
            transform: scale(0.95);
        }
        
        .action-icon {
            width: 48px;
            height: 48px;
            border-radius: 12px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 24px;
            margin-bottom: 8px;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        }
        
        .action-text {
            font-size: 12px;
            color: #323233;
            font-weight: 500;
        }
        
        /* 高频场景 */
        .hot-scenarios {
            margin: 0 16px 12px;
        }
        
        .section-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 12px;
        }
        
        .section-title {
            font-size: 16px;
            font-weight: 600;
            color: #323233;
        }
        
        .more-link {
            font-size: 14px;
            color: #1989fa;
            cursor: pointer;
        }
        
        .scenario-list {
            background: white;
            border-radius: 12px;
            overflow: hidden;
        }
        
        .scenario-item {
            display: flex;
            align-items: center;
            padding: 16px;
            border-bottom: 1px solid #f0f0f0;
            cursor: pointer;
            transition: background-color 0.2s;
        }
        
        .scenario-item:last-child {
            border-bottom: none;
        }
        
        .scenario-item:active {
            background-color: #f7f8fa;
        }
        
        .scenario-icon {
            width: 40px;
            height: 40px;
            border-radius: 8px;
            background: #f7f8fa;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 20px;
            margin-right: 12px;
        }
        
        .scenario-content {
            flex: 1;
        }
        
        .scenario-title {
            font-size: 14px;
            font-weight: 600;
            color: #323233;
            margin-bottom: 4px;
        }
        
        .scenario-desc {
            font-size: 12px;
            color: #969799;
            margin-bottom: 8px;
        }
        
        .scenario-stats {
            display: flex;
            gap: 12px;
        }
        
        .help-count, .success-rate {
            font-size: 11px;
            padding: 2px 6px;
            border-radius: 4px;
        }
        
        .help-count {
            background: #fff7e6;
            color: #ff976a;
        }
        
        .success-rate {
            background: #f0f9ff;
            color: #1989fa;
        }
        
        /* 成功案例 */
        .success-cases {
            margin: 0 16px 12px;
        }
        
        .case-list {
            background: white;
            border-radius: 12px;
            overflow: hidden;
        }
        
        .case-item {
            padding: 16px;
            border-bottom: 1px solid #f0f0f0;
            cursor: pointer;
            transition: background-color 0.2s;
        }
        
        .case-item:last-child {
            border-bottom: none;
        }
        
        .case-item:active {
            background-color: #f7f8fa;
        }
        
        .case-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 8px;
        }
        
        .case-tag {
            font-size: 12px;
            padding: 2px 8px;
            background: #f0f9ff;
            color: #1989fa;
            border-radius: 4px;
        }
        
        .case-status {
            font-size: 12px;
            padding: 2px 8px;
            border-radius: 4px;
        }
        
        .case-status.resolved {
            background: #f6ffed;
            color: #52c41a;
        }
        
        .case-title {
            font-size: 14px;
            font-weight: 600;
            color: #323233;
            margin-bottom: 6px;
        }
        
        .case-summary {
            font-size: 12px;
            color: #969799;
            line-height: 1.4;
            margin-bottom: 8px;
        }
        
        .case-footer {
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        
        .case-amount {
            font-size: 12px;
            color: #ee0a24;
            font-weight: 600;
        }
        
        .case-time {
            font-size: 12px;
            color: #c8c9cc;
        }
        
        /* 底部导航 */
        .bottom-nav {
            position: fixed;
            bottom: 0;
            left: 0;
            right: 0;
            background: white;
            border-top: 1px solid #ebedf0;
            display: flex;
            padding-bottom: env(safe-area-inset-bottom);
            z-index: 100;
        }
        
        .nav-item {
            flex: 1;
            display: flex;
            flex-direction: column;
            align-items: center;
            padding: 8px 0;
            cursor: pointer;
            transition: color 0.2s;
        }
        
        .nav-item.active {
            color: #1989fa;
        }
        
        .nav-icon {
            font-size: 20px;
            margin-bottom: 4px;
        }
        
        .nav-text {
            font-size: 10px;
        }
        
        /* 页面内容底部留白 */
        .page-content {
            padding-bottom: 60px;
        }
        
        /* 响应式适配 */
        @media (max-width: 375px) {
            .quick-actions {
                margin: 0 12px 12px;
                padding: 16px;
            }
            
            .hot-scenarios, .success-cases {
                margin: 0 12px 12px;
            }
        }
    </style>
</head>
<body>
    <!-- 状态栏 -->
    <div class="status-bar">
        <span>9:41</span>
        <span>维权力</span>
        <span>100%</span>
    </div>
    
    <!-- 顶部导航 -->
    <div class="top-nav">
        <div class="logo-section">
            <div class="logo">⚖️</div>
            <div class="app-name">维权力</div>
        </div>
        <button class="login-btn" onclick="goToLogin()">登录</button>
    </div>
    
    <div class="page-content">
        <!-- 搜索栏 -->
        <div class="search-section">
            <div class="search-bar" onclick="goToSearch()">
                <span class="search-icon">🔍</span>
                <span>搜索维权案例、模板</span>
            </div>
        </div>
        
        <!-- 快捷入口 -->
        <div class="quick-actions">
            <div class="action-grid">
                <div class="action-item" onclick="goToAI()">
                    <div class="action-icon">🤖</div>
                    <div class="action-text">AI诊断</div>
                </div>
                <div class="action-item" onclick="goToTemplates()">
                    <div class="action-icon">📄</div>
                    <div class="action-text">模板库</div>
                </div>
                <div class="action-item" onclick="goToAssistance()">
                    <div class="action-icon">🆘</div>
                    <div class="action-text">找援助</div>
                </div>
                <div class="action-item" onclick="goToCommunity()">
                    <div class="action-icon">👥</div>
                    <div class="action-text">维权社区</div>
                </div>
            </div>
        </div>
        
        <!-- 高频场景推荐 -->
        <div class="hot-scenarios">
            <div class="section-header">
                <h3 class="section-title">高频维权场景</h3>
                <span class="more-link" onclick="goToCommunity()">更多</span>
            </div>
            <div class="scenario-list">
                <div class="scenario-item" onclick="goToScenario(1)">
                    <div class="scenario-icon">💰</div>
                    <div class="scenario-content">
                        <div class="scenario-title">工资拖欠</div>
                        <div class="scenario-desc">公司拖欠工资超过30天</div>
                        <div class="scenario-stats">
                            <span class="help-count">1234人求助</span>
                            <span class="success-rate">成功率85%</span>
                        </div>
                    </div>
                </div>
                <div class="scenario-item" onclick="goToScenario(2)">
                    <div class="scenario-icon">🏠</div>
                    <div class="scenario-content">
                        <div class="scenario-title">押金不退</div>
                        <div class="scenario-desc">租房押金无理由不退还</div>
                        <div class="scenario-stats">
                            <span class="help-count">856人求助</span>
                            <span class="success-rate">成功率78%</span>
                        </div>
                    </div>
                </div>
                <div class="scenario-item" onclick="goToScenario(3)">
                    <div class="scenario-icon">🛒</div>
                    <div class="scenario-content">
                        <div class="scenario-title">商品质量</div>
                        <div class="scenario-desc">购买商品存在质量问题</div>
                        <div class="scenario-stats">
                            <span class="help-count">642人求助</span>
                            <span class="success-rate">成功率92%</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        
        <!-- 精选成功案例 -->
        <div class="success-cases">
            <div class="section-header">
                <h3 class="section-title">精选成功案例</h3>
                <span class="more-link" onclick="goToSuccessCases()">更多</span>
            </div>
            <div class="case-list">
                <div class="case-item" onclick="goToCase(1)">
                    <div class="case-header">
                        <span class="case-tag">职场纠纷</span>
                        <span class="case-status resolved">已解决</span>
                    </div>
                    <div class="case-title">成功追回3个月拖欠工资</div>
                    <div class="case-summary">通过劳动仲裁，3个月内成功追回被拖欠的工资和赔偿金</div>
                    <div class="case-footer">
                        <span class="case-amount">追回2.8万元</span>
                        <span class="case-time">3个月前</span>
                    </div>
                </div>
                <div class="case-item" onclick="goToCase(2)">
                    <div class="case-header">
                        <span class="case-tag">租房矛盾</span>
                        <span class="case-status resolved">已解决</span>
                    </div>
                    <div class="case-title">房东恶意扣押金，成功维权</div>
                    <div class="case-summary">房东以各种理由扣押金，通过投诉和协商成功要回</div>
                    <div class="case-footer">
                        <span class="case-amount">追回5000元</span>
                        <span class="case-time">1个月前</span>
                    </div>
                </div>
            </div>
        </div>
    </div>
    
    <!-- 底部导航 -->
    <div class="bottom-nav">
        <div class="nav-item active" onclick="switchTab(0)">
            <div class="nav-icon">🏠</div>
            <div class="nav-text">首页</div>
        </div>
        <div class="nav-item" onclick="switchTab(1)">
            <div class="nav-icon">👥</div>
            <div class="nav-text">社区</div>
        </div>
        <div class="nav-item" onclick="switchTab(2)">
            <div class="nav-icon">⚖️</div>
            <div class="nav-text">维权</div>
        </div>
        <div class="nav-item" onclick="switchTab(3)">
            <div class="nav-icon">👤</div>
            <div class="nav-text">我的</div>
        </div>
    </div>
    
    <script>
        // 页面跳转函数
        function goToLogin() {
            alert('跳转到登录页面');
        }
        
        function goToSearch() {
            alert('跳转到搜索页面');
        }
        
        function goToAI() {
            alert('跳转到AI诊断页面');
        }
        
        function goToTemplates() {
            alert('跳转到模板库页面');
        }
        
        function goToAssistance() {
            alert('跳转到援助页面');
        }
        
        function goToCommunity() {
            alert('跳转到社区页面');
        }
        
        function goToScenario(id) {
            alert('跳转到场景' + id + '的AI诊断');
        }
        
        function goToCase(id) {
            alert('跳转到案例' + id + '详情页');
        }
        
        function goToSuccessCases() {
            alert('跳转到成功案例列表');
        }
        
        // 底部导航切换
        function switchTab(index) {
            const navItems = document.querySelectorAll('.nav-item');
            navItems.forEach((item, i) => {
                if (i === index) {
                    item.classList.add('active');
                } else {
                    item.classList.remove('active');
                }
            });
            
            const tabs = ['首页', '社区', '维权', '我的'];
            alert('切换到' + tabs[index] + '页面');
        }
        
        // 模拟移动端触摸反馈
        document.addEventListener('touchstart', function() {}, {passive: true});
    </script>
</body>
</html>
